<template>
	<view class="root">
		<view class="backBtn" @click="goBack()">
			<uni-icons type="back" size="24px" color="white"></uni-icons>
		</view>

		<image class="bg" src="http://haojiezhe12345.top:8090/miniprogram_static/userhome/defaultbg.jpg"
			mode="aspectFill"></image>

		<view class="card">
			<view class="top">
				<image :src="userinfo.avatarurl" mode="aspectFill"></image>
				<text class="singleLine">{{ userinfo.nickname }}</text>
				<navigator class="edit" v-if="id == myId" url="/pages/person_msg/person_msg">编辑资料</navigator>
			</view>

			<view class="detail">
				<view>
					<text>省市：</text>
					<text class="singleLine">{{ [userinfo.province, userinfo.city].join('-') }}</text>
				</view>

				<view>
					<text>性别：</text>
					<text class="singleLine">{{ userinfo.gender == 1 ? '男' : '女' }}</text>
				</view>

				<view>
					<text>生日：</text>
					<text class="singleLine">{{ userinfo.userBirthday.join('-') }}</text>
				</view>

				<view>
					<text>爱好：</text>
					<text class="singleLine">{{ userinfo.hobby }}</text>
				</view>
			</view>
		</view>

		<view class="action">
			<navigator class="btn" v-if="id == myId" url="/pages/person_msg/person_msg">编辑资料</navigator>
			<template v-else>
				<view class="btn" v-if="!userinfo.isFriend" @click="addFrd">加好友</view>
				<view class="btn" v-if="userinfo.isFriend" @click="changeRemark">修改备注</view>
				<view class="btn btn-danger" v-if="userinfo.isFriend" @click="delFrd">删除好友</view>
			</template>
		</view>

	</view>
</template>

<script>
	import {
		getUserSomeMsg,
		partnerList,
		addFriend,
		partnerUpdate,
		partnerDelete,
	} from '@/config/api.js'

	import {
		goBack
	} from '../../utils'

	export default {
		mounted() {
			this.loadUserInfo()
		},

		onLoad(options) {
			this.id = options.id
			this.myId = this.$store.state.userInfo.id
		},

		async onPullDownRefresh() {
			await this.loadUserInfo()
			setTimeout(() => {
				uni.stopPullDownRefresh();
			}, 500)
		},

		data() {
			return {
				goBack,
				
				id: -1,
				myId: -1,

				userinfo: {
					"avatarurl": "",
					"city": "",
					"gender": 0,
					"hobby": "",
					"isFriend": 0,
					"nickname": "",
					"province": "",
					"userBirthday": []
				},
			}
		},
		methods: {
			async loadUserInfo() {
				/*
				let frdlist = await partnerList(1)
				let isfrd = 0
				frdlist.forEach(item => {
					if (item.user.id == this.id) {
						isfrd = 1
					}
				})
				*/

				let userres = await getUserSomeMsg(this.id)
				//userres.isFriend = isfrd
				this.userinfo = userres
			},

			addFrd() {
				uni.showModal({
					title: '输入验证消息',
					placeholderText: '你好！我是XXX',
					editable: true,
					success: (res) => {
						if (res.confirm) {
							addFriend({
								"comment": res.content,
								"frdId": this.id,
							}).then(res1 => {
								uni.showToast({
									title: '发送成功',
								})
							})
						}
					}
				})
			},

			changeRemark() {
				uni.showModal({
					title: '修改好友备注',
					editable: true,
					success: (res) => {
						if (res.confirm) {
							partnerUpdate(this.id, 1, res.content).then(res1 => {
								uni.showToast({
									title: '修改成功',
								})
							})
						}
					}
				})
			},

			delFrd() {
				uni.showModal({
					title: '确认删除好友?',
					success: (res) => {
						if (res.confirm) {
							partnerDelete(this.id).then(res1 => {
								//partnerUpdate(this.id, -1).then(res1 => {
								uni.showToast({
									title: '删除成功',
								})
								this.loadUserInfo()
							})
						}
					}
				})
			},
		}
	}
</script>

<style>
	.root {
		display: flex;
		flex-flow: column;
		min-height: 100%;
		background-color: #f4f4f4;
	}

	.backBtn {
		position: fixed;
		top: 0;
		left: 0;
		width: 36px;
		height: 36px;
		margin: 8px;
		background-color: rgba(0, 0, 0, 0.2);
		border-radius: 100vw;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.bg {
		width: 100%;
		height: 30vh;
	}

	.card {
		flex: 1;
		border-radius: 16px 16px 0 0;
		margin-top: -16px;
		overflow: hidden;
		display: flex;
		flex-flow: column;
		gap: 10px;
		padding-bottom: 50px;
	}

	.card>view {
		background-color: white;
	}

	.singleLine {
		flex: 1;
		min-width: 0;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.top {
		display: flex;
		align-items: center;
	}

	.top image {
		width: 60px;
		height: 60px;
		border-radius: 100vw;
		margin: 12px;
	}

	.top>.edit {
		font-size: 0.9rem;
		color: dodgerblue;
		margin-right: 12px;
	}

	.detail {
		display: flex;
		flex-flow: column;
		gap: 18px;
		padding: 14px;
	}

	.detail>view {
		display: flex;
	}

	.detail>view>text:first-child {
		font-weight: bold;
	}

	.detail>view>text:last-child {
		text-align: right;
	}

	.action {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		display: flex;
		gap: 8px;
		padding: 8px;
		background-color: white;
	}

	.action>.btn {
		flex: 1;
	}

	.btn {
		text-align: center;
		line-height: 36px;
		background-color: dodgerblue;
		border: 1px solid dodgerblue;
		color: white;
		border-radius: 6px;
		font-size: 14px;
	}

	.btn.btn-danger {
		background-color: #fff4f4;
		border: 1px solid red;
		color: red;
	}
</style>